<template>
  <div class="container">
    <el-header class="nav-header" ref="navHeader">
      <div class="header-content">
        <div class="header-left">在线教育大数据分析研判平台</div>

        <el-menu
          v-model="activeIndex"
          :default-active="route.path"
          class="el-tabs-demo"
          mode="horizontal"
          router
        >
          <el-menu-item index="/courses">
            <el-icon :size="20">
              <data-analysis />
            </el-icon>
            课程分析
          </el-menu-item>

          <el-menu-item index="/classroom">
            <el-icon :size="20">
              <school />
            </el-icon>
            班级分析
          </el-menu-item>

          <el-menu-item index="/auditor">
            <el-icon :size="20">
              <Discount />
            </el-icon>
            态势分析
          </el-menu-item>

          <el-menu-item index="/student">
            <el-icon :size="20">
              <EditPen />
            </el-icon>
            学生分析
          </el-menu-item>
        </el-menu>

        <div class="header-right">
          <div class="current-day">{{ currentDate }}</div>
          <div class="current-time">{{ currentTime }}</div>
        </div>
      </div>
    </el-header>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from "vue";
import {
  House,
  DataAnalysis,
  School,
  EditPen,
  Discount,
} from "@element-plus/icons-vue";
import { useRoute } from "vue-router";

const route = useRoute();
const activeIndex = ref(route.path);
let timer = null;

const currentDate = computed(() => {
  return new Date().toLocaleDateString("zh-CN", {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  });
});

const currentTime = ref(
  new Date().toLocaleTimeString("zh-CN", {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  })
);

onMounted(() => {
  timer = setInterval(() => {
    currentTime.value = new Date().toLocaleTimeString("zh-CN", {
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    });
  }, 1000);
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style scoped>
.nav-header {
  width: 100%;
  background-color: #fff;
  margin-bottom: 1vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-left,
.header-right {
  padding: 10px 10px;
  flex: 1;
}

.header-left {
  font-weight: bold;
  font-size: 20px;
  text-align: left;
}

.header-right {
  text-align: right;
  font-size: 19px;
}

.el-tabs-demo {
  flex: 2;
  display: flex;
  justify-content: center;
}

el-icon {
  width: 16px;
  height: 16px;
}

.router-link-active {
  text-decoration: none;
  color: #409eff;
}

.container {
  overflow-y: hidden;
}

.routerlink_beautify {
  margin-left: 5%;
  text-decoration: none;
  border-left: gainsboro 1px solid;
  border-right: gainsboro 1px solid;
}
</style>
